56<template>
  <div style="width: 95%; height:100%;margin: 0 auto;" class="map-bg">
    <div :id='echartId' style="width: 100%;height: 100%;"></div>
  </div>
</template>
<script setup>

  import { ref, defineProps, watch } from 'vue'
  import china from '@/json/china.json'
  import * as echarts from 'echarts'

  const props = defineProps({
  data: {
    type: Array,
    default: () => []
  },
  echartId:{
    type: String,
    default: 'mapDom'
  },
  showTipText:{
    type: Object,
    default:()=>({'text1':'启动总量', 'text2':'近期新增'})
  },
});
  let dataList = ref([])
  let initMapChart = null
  let options = {}
  const maxVisCount = ref(0)
  const mapEcharts = () =>{
    initMapChart = echarts.init(document.querySelector('#'+props.echartId))
      echarts.registerMap('china', china);
      options = {
          title: {
          },
          tooltip: {
              trigger: 'item',
              alwysShowContent: false,
              backgroundColor:"rgba(0,0,0,0)",
              borderColor:"rgba(0,0,0,0)",
              triggerOn: "mousemove",
              enterable:true,
              // 去掉阴影
              shadowBlur: 0,
              shadowColor: 'rgba(0, 0, 0, 0)',
              padding:[0],
              position: function (point, params, dom, rect, size) {
                if(params.name === "南海诸岛") return
                if((props.echartId.indexOf('Tms') > -1 && (params.name === "台湾"))) return 
                  // 提示框位置
                  let x, y
                  // 当前鼠标位置
                  const titleBoxWidth = document.querySelector('.map-tool-tip')?(document.querySelector('.map-tool-tip').offsetWidth):''
                  const pointX = point[0]-titleBoxWidth-10
                  const pointY = point[1]-20
                  // 提示框尺寸
                  const boxWidth = size.contentSize[0]
                  const boxHeight = size.contentSize[1]
                  // 容器尺寸
                  const viewWidth = size.viewSize[0]
                  // const viewHeight = size.viewSize[1]
                  // 设置光标左右位置
                  if (viewWidth - boxWidth < pointX) {
                    // 光标位置 大于 容器减去提示框的位置，右边放不下，放在左侧
                    x = pointX - boxWidth
                  } else {
                    // 默认紧贴光标右侧显示
                    x = pointX+30
                  }
                  // 设置光标上下位置
                  if (boxHeight < pointY) {
                    // 光标位置 小于 提示框位置，上面放不下，放在下侧
                    y = pointY - boxHeight
                  } else {
                    // 默认紧贴光标上侧显示
                    y = pointY- 120
                  }
                  // 记录提示框位置
                  // if (window.tooltipSpace?.position) window.tooltipSpace.position = [x, y]
                  return [x, y]
              },
              formatter: (params) => {
                if(params.name === "南海诸岛") return
                if((props.echartId.indexOf('Tms') > -1 && (params.name === "台湾"))) return
                return `<div class="map-tool-tip">
                          <div class="title">${params.name}</div> 
                          <p>${props.showTipText.text1}：${params.data.value ? Number(params.data.value).toLocaleString() : 0}</p>
                          <p class="last-item">${props.showTipText.text2}：<span><span>${(params.data.today && params.data.today!=0)?'+':''}</span>${params.data.today ? Number(params.data.today).toLocaleString() : 0}</span>
                          </p>
                        <div>`
              }
          },
          toolbox: {
            show: false,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
              dataView: { readOnly: false },
              restore: {},
              saveAsImage: {}
            }
          },
          visualMap: {
            min: 0,
            max: maxVisCount.value,
            left: '86%', //手柄位移
            top: '56%',
            textStyle: {
             color: '#fff'
            },
            realtime: false,
            calculable: false,
            inRange: {
              color: ['#55a4f7', '#7ad7e1', '#e1c968','#e7453c'],
              label:{ show: true, position: 'right' }
            },
            formatter: function (value) {
              if (value >= 10000) {
                return (value / 10000).toFixed(0).replace(/(\.0+$)/, "")+'w'; 
              } else {
                return value.toLocaleString()
              }
            },
          },
          geo:[{
            map: 'china',
            // aspectScale: 0.7,
            layoutCenter: ['50%', '50%'],
            center: [106, 33.95], //地图位置
            layoutSize: '100%',
            silent: true,
            roam: false,
            itemStyle: {
              normal: {
                    // shadowColor: '#296281',
                    shadowOffsetX: 0,
                    shadowOffsetY: 5, //投影大小
              },
              emphasis: { // 这个是鼠标移上去就会选中的样式，鼠标mouseover
                areaColor: '#276fce',
                borderWidth: 0,
              },   
            },  
            zoom: 1.1,             
          }],
          series: [
            {
              name: '中国',
              type: 'map',
              map: 'china',
              roam: false,
              zoom: 1.1,
              center: [106, 34],  
              layoutCenter: ["50%", "50%"], //地图位置
              layoutSize: '100%',
              label: {
                show: false,
                emphasis: {
                  show: false
                }
              },
              itemStyle: {
                  normal: {
                    areaColor: '#649cf2', //默认地图块颜色
                    borderColor: '#000', //地图边线颜色
                    borderWidth: 0.5, //地图边线粗细
                  },
                  emphasis: {
                    areaColor: 'yellow' //鼠标悬停颜色
                  }
              },
              data: dataList.value,
            },
            {
              name: '南海诸岛',
              type: 'scatter',
              coordinateSystem: 'geo',
              data: [], // 将数据设置为空数组，不显示任何点
            }
          ]
      }
      initMapChart.setOption(options)
      mapTip()
  }
  // onMounted(()=>{
  //   nextTick(()=>{
  //     mapEcharts()
  //   })
  // })
  var intervalId = null;
  //toolTip轮询
  const mapTip = () => {
    // 定时器轮询显示tooltip
    const array = options.series[0].data;
    if(array.length === 0) return
    initMapChart.dispatchAction({
      type: 'showTip',
      seriesIndex: 0,
      dataIndex: 0
    });
    initMapChart.dispatchAction({
      type: 'highlight',
      seriesIndex: 0,
      dataIndex: 0
    });
   if(intervalId) clearInterval(intervalId)
    var currentIndex = -1; // 当前显示的数据项索引
     intervalId = setInterval(() => {
      // 清除之前的高亮
      initMapChart.dispatchAction({
        type: 'downplay',
        seriesIndex: 0,
        dataIndex: currentIndex 
      });
      // 更新索引，循环显示
      currentIndex = (currentIndex + 1) % array.length;
      // 显示下一个数据项的tooltip
      initMapChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: currentIndex
      });
      initMapChart.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: currentIndex
      });
    }, 2000); // 每2秒更新一次tooltip的显示内容
    // 监听鼠标事件，悬浮时停止轮询，离开时继续轮询
    initMapChart.on('mousemove', function() {
      clearInterval(intervalId);
    });
  }
  // 监听 data 变化，更新图表
  watch(() => props.data, () => {
    dataList.value = props.data
    maxVisCount.value = dataList.value[0].value? dataList.value[0].value: 10000
    mapEcharts()
  }, { deep: true });
</script>
<style lang="scss">
.map-tool-tip{
  position: relative;
  padding: 10px;
  width: 130px;
  // height: 65px;
  background-color: #000;;
  /* background-image: linear-gradient(180deg, rgba(255,196,78,0.00) 0%, rgba(255,208,66,0.29) 99%); */
  color:#fff;
  background: url('/src/assets/P3_bg.png')  no-repeat 0  0 ;
  background-size: 100% 100% ;
}
.map-tool-tip .title{
  font-size: 16px;
  color: #FFFFFF;
  letter-spacing: 0;
  text-align: center;
  font-weight: 500;
  padding-top: 0px;
}
.map-tool-tip p {
   padding-left:13px;
    font-size: 11px;
    &.last-item{
      position: relative;
      top: -2px;
      padding-bottom: 8px;
      span{
        color: #FFD042;
      }
    }
  }
</style>
<style lang="scss" scoped>
  .map-bg{
    height: 100%;
    background: url('/src/assets/map_bg.png') no-repeat 0 0;
    background-size: 100% 100%;
  }
</style>